<include file="Common@Backend/header" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/csf/plugin/webupload/webuploader.css">
<script type="text/javascript" src="__PUBLIC__/csf/plugin/webupload/webuploader.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/csf/plugin/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/csf/plugin/ueditor/ueditor.all.min.js"></script>

	<!-- page heading start-->
    <div class="page-heading">
        <h3>
            {$breadcrumb.A}
        </h3>
        <ul class="breadcrumb">
            <li>
                {$breadcrumb.M}
            </li>
            <li>
                {$breadcrumb.C}
            </li>
            <li class="active"> {$breadcrumb.A}  </li>
        </ul>
    </div>
    <!-- page heading end-->
	
    <!--body wrapper start-->
    <div class="wrapper">
        <div class="row">
            <div class="col-lg-12">
                <section class="panel">
                    <header class="panel-heading">
                        添加商品
                    </header>
                    <div class="panel-body">
                        <form role="form" action="{$action}" method="post" id="form">
                            <input type="hidden" name="id" value="{$id}">
                            <div class="form-group">
                                <label for="name">商品名称</label>
                                <input type="text" name="name" class="form-control" id="name" placeholder="输入商品名" value="{$product.name}">
                            </div>
                            <div class="form-group">
                                <label for="keyword">商品分类</label>
                                <select selected="selected" name="category[]" class="form-control" size="5" multiple="multiple">
                                    {$optionStr}
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="keyword">关键词</label>
                                <input type="text" name="keyword" class="form-control" id="keyword" placeholder="输入关键词" value="{$product.keyword}">
                            </div>
                            <div class="form-group">
                                <label for="description">描述</label>
                                <textarea class="form-control" rows="5" name="description" id="description" value="{$product.description}"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="sku">商品货号</label>
                                <input type="text" name="sku" class="form-control" id="sku" placeholder="输入货号" value="{$product.sku}">
                            </div>
                            <div class="form-group">
                                <label for="stock">商品库存</label>
                                <input type="text" name="stock" class="form-control" id="stock" placeholder="输入库存" value="{$product.stock}">
                            </div>
                            <div class="form-group">
                                <label for="price">商品价格</label>
                                <input type="text" name="price" class="form-control" id="price" placeholder="输入价格" value="{$product.price}">
                            </div>
                            <div class="form-group">
                                <label for="image">商品图片</label>
                                <div class="btn">
                                    <div id="picker" class="col-md-2">添加</div>
                                </div>
                                <div class="container-fluid">
                                    <div class="row" id="picBox">
                                        <volist name="product.imgs" id="image">
                                            <div class="col-xs-2"><img src="__ROOT__/Uploads/{$image}" style="width: 100px;"><input type="hidden" name="productImage[]" value="{$image}"><br/><a href="#" class="delbtn">删除</a></div>
                                        </volist>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="status">商品状态</label>
                                <select class="form-control m-bot15" id="status" name="status">
                                    <if condition="$product['status'] eq 1">
                                        <option value="1" selected="selected">启用</option>
                                        <option value="0">关闭</option>
                                    <else/>
                                        <option value="1">启用</option>
                                        <option value="0" selected="selected">关闭</option>
                                    </if>
                                </select>
                            </div>
                            <div class="form-group" id="content-box">
                                <label for="content">商品详情</label>
                                <textarea rows="5" name="content" id="content">{$product.content}</textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">保存</button>
                            <a href="{$cancel}" class="btn btn-primary">取消</a>
                        </form>
                    </div>
                </section>
                <!-- 提交表单 -->
                <script type="text/javascript">
                    $('#form').on('submit',function(){
                        $.ajax({
                            type:'post',
                            url:$('#form').attr('action'),
                            data:$('#form').serialize(),
                            dataType:'json',
                            success:function(data){
                                if(data.status=='OK'){
                                    window.location=data.url;
                                }else{
                                    alert(data.msg);
                                }
                            }
                        });
                        return false;
                    });
                </script>
                <!-- 引入上传文件工具 -->
                <script type="text/javascript">
                    var uploader = WebUploader.create({
                        // 选完文件后，是否自动上传。
                        auto: true,
                        // swf文件路径
                        swf: '__PUBLIC__/csf/plugin/webupload/Uploader.swf',
                        // 文件接收服务端。
                        server: '{$upload}',
                        // 选择文件的按钮。可选。
                        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                        pick: '#picker',
                        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                        resize: false,

                        // runtimeOrder:'flash',
                        // 只允许选择图片文件。
                        duplicate:true,
                        accept: {
                            title: 'Images',
                            extensions: 'gif,jpg,jpeg,bmp,png',
                            mimeTypes: 'image/jpg,image/jpeg,image/png',
                        }
                    });
                    //上传成功事件
                    uploader.on( 'uploadSuccess', function(file,response) {
                        console.log(response);
                        if(response.status=='OK'){
                            var $div = $(
                            '<div class="col-xs-2"><img src="__ROOT__/Uploads/'+response.file+'" style="width:100px;"><input type="hidden" name="productImage[]" value="'+response.file+'"><br/><a href="#" class="delbtn">删除</a></div>'
                            ),
                            $img = $div.find('img');
                            $('#picBox').append( $div );
                        }
                        
                    });
                    //上传失败事件
                    uploader.on( 'uploadError', function( file ) {
                        var $li = $( '#'+file.id ),
                            $error = $li.find('div.error');

                        // 避免重复创建
                        if ( !$error.length ) {
                            $error = $('<div class="error"></div>').appendTo( $li );
                        }

                        $error.text('上传失败');
                    });
                </script>
                <!-- 动态绑定删除按钮 -->
                <script type="text/javascript">
                    $('#picBox').on('click','.delbtn',function(){
                        $(this).parent().remove();
                        return false;
                    });
                </script>
                 <!--引入uedit编辑框-->
                <script type="text/javascript">
                     var ue = UE.getEditor('content',{
                        initialFrameWidth:$('#content-box').width(),
                        initialFrameHeight:400,
                        autoHeightEnabled:false,
                    });
                </script>
            </div>
        </div>
    </div>
    <!--body wrapper end-->
<include file="Common@Backend/footer" />